<template>
  <div>
    <div class="pati_box">
      <div
        class="pati_box_item"
        :class="{ active: idx == item.hospPatientId }"
        v-for="(item, index) in patiList"
        @click="selectPati(index, item)"
      >
        <div>
          <div class="user">
            <img
              src="@/assets/img/icon_boy.png"
              alt=""
              class="userImg"
              v-if="item.sex == 1"
            />
            <img
              src="@/assets/img/icon_girl.png"
              alt=""
              class="userImg"
              v-else
            />

            <span>{{ item.name }}</span>
          </div>
          <div>就诊卡号：{{ item.hospPatientId }}</div>
          <div>手&nbsp;&nbsp;机&nbsp;号：{{ item.mobile }}</div>
          <div>身份证号：{{ item.idNo }}</div>
        </div>
        <!-- <div>
          <img src="@/assets/img/icon_qr code@2x.png" alt="" class="qrImg" />
        </div> -->
        <img
          src="@/assets/img/selected@2x.png"
          alt=""
          class="selectImg"
          v-if="idx == item.hospPatientId"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getPatientList } from "@/api/api";
export default {
  components: {},
  data() {
    return {
      patiList: [],
      idx: null,
      userInfo: null,
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    }

    this.getFamilyList();
  },
  methods: {
    // 获取就诊人列表
    getFamilyList() {
      var data = {
        isDefault: "0",
      };
      getPatientList(data).then((res) => {
        if (res.code == 200) {
          this.patiList = res.data;
          if (this.userInfo) {
            this.idx = this.userInfo.hospPatientId;
          } else {
            res.data.forEach((element) => {
              if (element.isDefault == 1) {
                this.idx = element.hospPatientId;
              }
            });
          }
        }
      });
    },
    selectPati(index, item) {
      this.idx = item.hospPatientId;
      console.log(item);
      window.localStorage.setItem("userInfo", JSON.stringify(item));
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.pati_box {
  padding: 1rem;
  width: calc(100% - 2rem);
}

.pati_box_item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.75rem 0.9375rem 1.3125rem 0.9375rem;
  width: calc(100% - 1.875rem);
  height: 6.25rem;
  background: rgba(255, 255, 255, 1);
  border: 0.0625rem solid #fff;
  box-shadow: 0px 0px 0.9375rem 0px rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.pati_box_item .user {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.8125rem;
}

.pati_box_item .userImg {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 50%;
  margin-right: 0.5625rem;
}

.pati_box_item .qrImg {
  width: 1.875rem;
  height: 1.875rem;
}

.pati_box_item .selectImg {
  width: 1.5625rem;
  height: 1.4375rem;
  position: absolute;
  right: -1px;
  top: -1px;
}

.active {
  border: 1px solid rgba(54, 153, 255, 1);
}
</style>